<template>
  <div>
    <el-dialog :title="titles" :visible.sync="dialogVisible" width="40%">
      <div class="header">
        <el-form
          ref="form"
          :label-position="labelPosition"
          :model="form"
          label-width="80px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="站点名称" prop="name">
                <span>{{ form.name }}</span>
                <!-- <el-input v-model="form.name" /> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="站点ID" prop="station_code">
                <span>{{ form.station_code }}</span>
              </el-form-item></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="监控类型" prop="station_type">
                <span>{{ form.station_type }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否禁用" prop="status">
                <span>{{ form.status }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="用电性质" prop="property_id">
                <span>{{ form.property_id }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="站点类别" prop="cate_id">
                <span>{{ form.cate_id }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="供电单位" prop="power_unit">
                <span>{{ form.power_unit }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12"
              ><el-form-item label="上线日期" prop="on_line_at">
                <span>{{ form.on_line_at }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <!--
          <el-row>
            <el-col :span="12">
              <el-form-item label="所在地" prop="locations">
                <el-input v-model="form.locations" /> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="电价方案">
                <el-input v-model="form.scheme_id" />
              </el-form-item>
            </el-col>
          </el-row> -->

          <el-row>
            <el-col :span="12">
              <el-form-item label="电压等级" prop="voltage_level">
                <span>{{ form.voltage_level }}</span>
              </el-form-item></el-col
            >
            <el-col :span="12"
              ><el-form-item label="主变总数" prop="main_transform">
                <span>{{ form.main_transform }}</span>
              </el-form-item></el-col
            >
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="装机容量" prop="kw">
                <span>{{ form.kw }}</span>
              </el-form-item></el-col
            >
            <el-col :span="12"
              ><el-form-item label="运行容量" prop="operate_capacity">
                <span>{{ form.operate_capacity }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同电量" prop="contract_electric">
                <span>{{ form.contract_electric }}</span>
              </el-form-item></el-col
            >
            <el-col :span="12">
              <el-form-item label="抄表日期" prop="read_date">
                <span>{{ form.read_date }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用电地址">
                <span>{{ form.address }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经纬度">
                <span>{{ form.ln }}</span>

                <span>---</span>
                <span>{{ form.lat }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="联系电话">
                <el-input v-model="form.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人">
                <el-input v-model="form.contact" /> </el-form-item
            ></el-col>
          </el-row> -->
          <!-- <el-row>
            <el-col :span="24">
              <el-form-item label="客户营业户号">
                <el-input v-model="form.open_no" />
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="数据粒度" prop="data_particles">
                <span>{{ form.data_particles }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" />
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="数据粒度设置时间" prop="data_particles_at">
                <span>{{ form.data_particles_at }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-button v-if="false" :plain="true" @click="open2">成功</el-button>
  </div>
</template>
<script>
export default {
  props: ['titles', 'detailes1'],
  data() {
    return {
      dialogVisible: false,
      labelPosition: 'right',
      form: {},
    }
  },
  watch: {
    detailes1(newVlue, oldValue) {
      this.form = newVlue
    },
  },
  mounted() {
    this.form = this.detailes1
  },
  methods: {
    open() {
      if (this.detailes1.length !== 0) {
        this.dialogVisible = true
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep.el-dialog {
  height: 70%;
  overflow: auto;
}
::v-deep.el-dialog__body {
  // padding-left: 30px;
  padding-right: 30px;
  height: 83%;
  overflow: auto;
}
::v-deep.el-form-item__label {
  width: 134px !important;
}
::v-deep.el-form-item__content {
  margin-left: 144px !important;
}
::v-deep.el-input {
  border: none;
}
</style>
